<template>
  <div class="top-box"></div>

  <img class="photo loading" v-for="item in images" v-lazy="item" />
</template>

<script setup>
// import defaultImg from '@/assets/1x1.png?inline'
const images = ['12.png', '2.png', '3.png']

// const observer = new IntersectionObserver(
//   (entries) => {
//     // entries 是一个数组
//     entries.forEach((entry) => {
//       // entry 是相交信息对象
//       if (entry.isIntersecting) {
//         // 证明发生了相交
//         // 取出图片的真实路径，并设置到元素的 src 属性上
//         entry.target.src = entry.target.dataset.src
//         // 相交事件的解绑
//         observer.unobserve(entry.target)

//         // 图片懒加载成功
//         entry.target.addEventListener('load', (e) => {
//           // 1. 移除元素上的 loading 类名
//           e.target.classList.remove('loading')
//           // 2. 移除 data-src
//           e.target.removeAttribute('data-src')
//         })

//         // 图片懒加载失败
//         entry.target.addEventListener('error', (e) => {
//           e.target.src = defaultImg
//           e.target.classList.remove('loading')
//           e.target.classList.add('lazy-error')
//         })
//       }
//     })
//   },
//   {
//     threshold: 0
//   }
// )

// const vLazy = {
//   // 被指令控制的元素，将要被插入 DOM 中的时候，调用此函数
//   beforeMount(el, binding) {
//     el.classList.add('loading')
//     el.src = defaultImg
//     el.dataset.src = binding.value
//     observer.observe(el)
//   }
// }
</script>

<style scoped>
.top-box {
  width: 100%;
  height: 1000px;
  background-color: cyan;
}

.photo {
  width: 100%;
  height: 200px;
  margin-top: 100px;
}

/* .loading {
  background: #fbfbfb url('@/assets/loading.gif?inline') no-repeat center;
  background-size: 140px;
}

.lazy-error {
  background: #fbfbfb url('@/assets/bad.jpg?inline') no-repeat center;
  background-size: 30px;
} */
</style>
